<template>
  <div>
    <template v-if="!showTwo">

      <van-row class="goods-type-box tc" gutter="4">
          <van-col  span="12" v-for="(item,index) in typeData" :key="index">
            <div class="box" @click="showTypeChild(item)">
              {{item.name}}
            </div>
          </van-col>
      </van-row>
    </template>
    <template v-else>
      <van-row class="goods-typeTwo-box tc" gutter="4">
          <van-col class="type-dt" span="6">
            <div class="box">
              {{typeDataChild.name}}
            </div>
            <div class="back-box" @click="showTwo=false">
              返回
            </div>
          </van-col>
          <van-col class="type-dd" span="18">
            <van-col  span="12" v-for="(item,index) in typeDataChild.children" :key="index">
              <div class="box">
                {{item.name}}
              </div>
            </van-col>
          </van-col>
      </van-row>
    </template>
  </div>
</template>

<script>
import {
  Tag,
  Col,Row,
  Icon,
} from 'vant';
import * as shop from 'api/shop'
export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
  },

  data() {
    return {
      showTwo:false,
      typeData:[],
      typeDataChild:{
      },
    };
  },

  methods: {
    showTypeChild(item) {
      this.$set(this,'typeDataChild',item);
      this.$nextTick(()=>{
        this.showTwo=true;
      })
    },
    getGoodsTypeTree(){
      shop.getGoodsTypeTree().then(data=>{
        this.typeData=data.obj;
      })
    }
  },
  mounted(){
    this.getGoodsTypeTree()
  }
};
</script>

<style lang="less">

</style>